
<link rel="stylesheet" href="/assets/home/plugin/citypicker/css/city-picker.css">
<link rel="stylesheet" href="/assets/home/css/profile.css">
<script src="/assets/home/plugin/citypicker/js/city-picker.data.min.js"></script>
<script src="/assets/home/plugin/citypicker/js/city-picker.min.js"></script>
<!-- 头部 -->
<div class="user">
    <div class="avatar wow fadeInUp">
        <img src="{$LoginUser['avatar']}" />
    </div>
</div>

<!-- 表单提交，有文件上传要设置enctype -->
<form class="mui-input-group" method="post" enctype="multipart/form-data">
    <div class="mui-input-row">
        <label>昵称</label>
        <input type="text" class="mui-input-clear" name="nickname" placeholder="请输入昵称" value="{$LoginUser['nickname']}">
    </div>
    <div class="mui-input-row">
        <label>手机号码</label>
        <input type="text" readonly name="mobile" placeholder="请输入手机号码" value="{$LoginUser['mobile']}">
    </div>
    <div class="mui-input-row">
        <label>邮箱</label>
        <input type="text" name="email" placeholder="请输入邮箱" value="{$LoginUser['email']}">
    </div>
    <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" name="password" placeholder="请输入密码">
    </div>
    <div class="mui-input-row">
        <label>性别</label>
        <select name="gender">
            <option value="0" {$LoginUser['gender']=='0' ? 'selected' : '' } >保密</option>
            <option value="1" {$LoginUser['gender']=='1' ? 'selected' : '' }>男</option>
            <option value="2" {$LoginUser['gender']=='2' ? 'selected' : '' }>女</option>
        </select>
    </div>
    <div class="mui-input-row region">
        <label>地区</label>
        <div class="citypicker region">
            <input id="city" readonly type="text" data-toggle="city-picker" name="region" />
            <input type="hidden" name="code" id="code">
        </div>
    </div>

    <div class="mui-input-row">
        <label>修改头像：</label>
        <button type="button" class="layui-btn upload-img" onclick="avatar.click()">上传头像</button>
        <input type="file" name="avatar" id="avatar" style="display: none;">
    </div>
    <div style="width: 200px;margin-left: 15px;">
        <!-- 条件判断，有图片就显示，没有图片就不显示 -->
        <img src="{$LoginUser['avatar']}" id="avatar-preview" alt="" style="width: 100%;height: 100%;object-fit: cover;">
    </div>

    <div class="mui-button-row">
        <button type="submit" class="mui-btn mui-btn-primary">确认</button>
        <button type="button" class="mui-btn mui-btn-danger" onclick="history.go(-1)">返回</button>
    </div>
</form>


<script>

    // 回显地区
    let code = "{$LoginUser.district}" || "{$LoginUser.city}" || "{$LoginUser.province}"
    $("#city").val(code)

    $("#avatar").change(function (e) {
        let file = e.target.files[0];
        let url = URL.createObjectURL(file)
        $("#avatar-preview").attr("src", url)
    })

    $("#city").on("cp:updated", function () {
        var citypicker = $(this).data("citypicker");
        var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
        $("#code").val(code);
    });

</script>